<script>
export default {
  name: "SportKonlage",
  data() {
    return {
      //分页
      pageData: {
        page: 1,
        size: 2,
        sportType: null,
      },
      total: 0,//分页总行数用于分页计算
      //表格数据
      tableData: [],
      dialogVisible: false,//窗口的打开或关闭用到
      addData:{
        id:null,
        sportType: null,
        suitableTime:null,
        suitableHeartRate:null,
        suitableFrequency:null,
        recommendedSpeed:null,
      },//用于新增的数据绑定
      //弹窗表头的标题
      tableTitle:"新增",

      value: ''
    }
  },
  methods: {
    //获取用户信息
    getsport() {
      this.$http({url: "user/selectPage", method: "GET", params: this.pageData}).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    //分页的两个方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //重新加载表格数据
      this.pageData.size = val;
      //重新调用数据加载方法
      this.getsport()//用于改变没有的条数
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageData.page = val;
      //重新调用数据加载方法
      this.getsport()//改变当前页面数
    },
    //新增弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //打开新增窗口
    addShow(res) {

      if (res){
        //修改
        this.tableTitle="修改"
        //将要修改的数据显示
        this.addData.id=res.id
        this.addData.sportType=res.sportType
        this.addData.suitableTime=res.suitableTime
        this.addData.suitableHeartRate=res.suitableHeartRate
        this.addData.suitableFrequency=res.suitableFrequency
        this.addData.recommendedSpeed=res.recommendedSpeed
      }else{
        //新增
        this.tableTitle="新增"
        this.addData.id=null
        this.addData.sportType=null
        this.addData.suitableTime=null
        this.addData.suitableHeartRate=null
        this.addData.suitableFrequency=null
        this.addData.recommendedSpeed=null
      }
      this.dialogVisible = true
    },

    add() {
      if (this.tableTitle == "新增") {
        this.$http({url: "/user/add", method: "post", data: this.addData}).then(res => {
          //提示
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //先将数据清空 重置表单
          this.addData.sportType = null
          this.addData.suitableTime = null
          this.addData.suitableHeartRate = null
          this.addData.suitableFrequency = null
          this.addData.recommendedSpeed = null
          //关闭弹窗
          this.dialogVisible = false
          //数据重新加载
          this.getsport()
        })
      } else {
        //修改
        this.$http({url: "/user/updata", method: "post", data: this.addData}).then(res => {
          //提示
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //先将数据清空 重置表单
          this.addData.sportType = null
          this.addData.suitableTime = null
          this.addData.suitableHeartRate = null
          this.addData.suitableFrequency = null
          this.addData.recommendedSpeed = null
          //图片清空
          //关闭弹窗
          this.dialogVisible = false
          //数据重新加载
          this.getsport()
        })
      }
    },
    deletesport(row){
      this.$http({url: "/user/deleteUser", method: "DELETE", params:{"id":row.id}}).then(res => {
        if (res.data.code==200){
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //刷新表格
          this.getsport();
        }else {
          this.$message.error("删除失败")
        }
      })
    }
  },
  mounted() {//与method是同一级别的
    //组件加载触发该方法
    //发送请求获取数据
    this.getsport();
  }
}
</script>


<template>
  <div class="background-container">
    <!--面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>运动知识</el-breadcrumb-item>
    </el-breadcrumb>
    <!--查询列表-->
    <el-row style="margin-top: 20px;">
      <el-col :span="4">
        <el-input
          placeholder="请输入运动的类型"
          prefix-icon="el-icon-search"
          v-model="pageData.sportType">
        </el-input>
      </el-col>

      <el-col :span="4" style="margin-left: 20px">
        <el-button type="primary" @click="getsport">查询</el-button>
        <el-button type="success" @click="addShow()">新增</el-button>
        <!--   aadshow把提示框作为一个展示>-->
      </el-col>

    </el-row>

    <!--查询数据-->
    <el-table
      :data="tableData"
      style="width: 100%;margin-top: 20px" >
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sportType"
        label=" 运动类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="suitableFrequency"
        label="运动频率">
      </el-table-column>
      <el-table-column
        prop="suitableTime"
        label="运动时间">
      </el-table-column>
      <el-table-column
        prop="recommendedSpeed"
        label="运动速度">
      </el-table-column>
      <el-table-column
        prop="suitableHeartRate"
        label="运动心率">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="addShow(scope.row)" type="text" size="small"><i class="el-icon-edit-outline" ></i></el-button>
          <el-button type="text" @click="deletesport(scope.row)" size="small"><i class="el-icon-delete" ></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.page"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog
      :title="tableTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="addform" :model="addData" label-width="80px">
        <el-form-item label="运动类型">
          <el-input v-model="addData.sportType"></el-input>
        </el-form-item>
        <el-form-item label="运动时间">
          <el-input v-model="addData.suitableTime"></el-input>
        </el-form-item>
        <el-form-item label="运动频率">
          <el-input v-model="addData.suitableFrequency"></el-input>
        </el-form-item>
        <el-form-item label="运动心率">
          <el-input v-model="addData.suitableHeartRate"></el-input>
        </el-form-item>
        <el-form-item label="运动速度">
          <el-input v-model="addData.recommendedSpeed"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add">提 交</el-button>
  </span>
    </el-dialog>
  </div>


</template>



<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.background-container {
  background-image: url('../assets/user.jpg'); /* 替换为你的图片路径 */
  background-size: cover; /* 拉伸填充整个容器 */
  background-repeat: no-repeat;
  min-height: 100vh; /* 保证容器高度至少为视口高度 */
  padding: 20px; /* 可选：避免内容贴边 */
  box-sizing: border-box; /* 防止内边距影响宽度 */
}

/* 优化表格内容在背景上的可读性 */
.el-table {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
}
</style>
